<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>商家入驻审核资料</title>
    <link href="./bootstrap/css/bootstrap.css" rel="stylesheet" type="text/css"/>
    <script src="https://s3.pstatp.com/cdn/expire-1-M/jquery/3.1.1/jquery.min.js"></script>
    <script src="./bootstrap/js/bootstrap.js"></script>
    <script>
        //加载好网页后需要执行的函数
        window.onload = function () {
            let currentPage = 1; // 当前页码
            const pageSize = 5;  // 每页显示的记录数
            let totalPages = 0;  // 总页数
            let allData = [];    // 存储所有商家数据

            // 调用后端接口获取数据
            $.ajax({
                url: 'plateform/list',
                type: 'get',
                dataType: "json",

                success: function (res) {
                    if (res.code === 200) {
                        allData = res.data;
                        totalPages = Math.ceil(allData.length / pageSize);
                        renderTable(currentPage); // 初始化渲染第一页
                        renderPagination();       // 渲染分页控件

                    }
                }
            });

            // 渲染表格内容
            function renderTable(page) {
                $("#tb").empty(); // 清空表格内容 ，填充新的数据
                const start = (page - 1) * pageSize;  //第一个数据的索引
                const end = Math.min(start + pageSize, allData.length); //最后一个数据的索引
                for (let i = start; i < end; i++) {
                    const merchant = allData[i];//通过循环获取当前页的数据
                    const currentMerchantStatus = merchant.mstatus === 0 //三元运算符写条件判断写法
                        ? "待审核"
                        : merchant.mstatus === 1
                            ? "已通过"
                            : "已拒绝";

                    $("<tr><td>" + merchant.mid + "</td><td>" + merchant.mcontact + "</td><td>" + merchant.mphone + "</td><td>" + merchant.memail + "</td><td>" + merchant.maddress + "</td><td>" + (merchant.merchantType == 1 ? '个人' : '企业') + "</td><td>" + merchant.mrealName + "</td><td>" + merchant.midCard + "</td><td>" + "<img style='width: 50px;height: 50px;' src=" + merchant.midCardImg + ">" + "</td><td>" + currentMerchantStatus + "</td><td><button class='btn btn-success' onclick='accessFun(" + merchant.mid + ")'>通过</button><button class='btn btn-danger' onclick='uncheck(" + merchant.mid + ")' >拒绝</button></td></tr>").appendTo($("#tb"));

                }
            }

            // 渲染分页控件
            function renderPagination() {//渲染“上一页”按钮**
                $("#pagination").empty(); // 清空分页控件 ；清空已有的分页按钮，重新生成当前页对应的分页控件。
                $("<button class='btn btn-secondary m-1'>&laquo;</button>") //渲染按钮
                    .appendTo($("#pagination"))
                    .click(function () {
                        if (currentPage > 1) {
                            currentPage--;
                            renderTable(currentPage);
                            renderPagination();
                        }// - 动态生成“上一页”按钮（`&laquo;` 是左箭头符号）。当按钮被点击时：如果当前页大于 1，则减小当前页号 (`currentPage--`)。重新渲染表格和分页控件。
                    });

                for (let i = 1; i <= totalPages; i++) {
                    const button = $("<button class='btn btn-primary m-1'>" + i + "</button>");
                    if (i === currentPage) button.addClass("active");
                    button.appendTo($("#pagination"))
                        .click(function () {
                            currentPage = i;
                            renderTable(currentPage);
                            renderPagination();
                        });
                }

                $("<button class='btn btn-secondary m-1'>&raquo;</button>")
                    .appendTo($("#pagination"))
                    .click(function () {
                        if (currentPage < totalPages) {
                            currentPage++;
                            renderTable(currentPage);
                            renderPagination();
                        }
                    });
            }
        };


        //管理员审核商家的入驻资料
        function accessFun(mid) {
            let awn = window.confirm("你确定要将当前商家审核通过吗？")
            if (awn) {
                $.ajax({
                    url: 'plateform/access',
                    type: 'post',
                    dataType: 'json',
                    data: {
                        mid: mid
                    },
                    success: function (res) {
                        if (res.code === 200) {
                            alert(res.message);
                            window.location.reload();
                        } else {
                            alert(res.message);
                        }
                    }
                });
            } else {
                //
            }
        }

        function uncheck(mid) {
            // alert("资料不合适，拒绝通过")
            let anw = window.confirm("你确定要对这条数据置为不通过状态吗？");
            if (anw) { // 如果点击的是确定（确定拒绝）
                $.ajax({
                    url: 'plateform/unstatus',
                    type: 'post',
                    dataType: 'json',
                    data: {
                        mid: mid
                    },
                    success: function (res) {
                        if (res.code == 200) {
                            alert(res.message)
                            window.location.reload()
                        } else {
                            alert(res.message)
                        }
                    }
                })
            } else {

            }
        }

        function queryByCondtion(mrealName) {

            // console.log(obj)
            $.ajax({
                url: 'plateform/queryByCondtion?mrealName='+mrealName,
                type: 'get',
                dataType: 'json',
                success: function (res) {
                    console.log('》》》》》》====>>>>',res)
                    if (res.code == 200) {
                        // 清空上一次的记录
                        $("#tb").empty();
                        let data_val = res.data
                        for (var i = 0; i < data_val.length; i++) {

                            // 拼接字符串
                            let status_val = data_val[i].mstatus;
                            if (status_val == 0) {
                                status_val = '待审核';
                            } else if (status_val == 1) {
                                status_val = '已通过';
                            } else {
                                status_val = '未通过';
                            }

                            $("<tr><td>" + data_val[i].mid + "</td><td>" + data_val[i].mcontact + "</td><td>" + data_val[i].mphone + "</td><td>" + data_val[i].memail + "</td><td>" + data_val[i].maddress + "</td><td>" + (data_val[i].merchantType == 1 ? '个人' : '企业') + "</td><td>" + data_val[i].mrealName + "</td><td>" + data_val[i].midCard + "</td><td>" + "<img style='width: 50px;height: 50px;' src=" + data_val[i].midCardImg + ">" + "</td><td>" + status_val + "</td><td><button class='btn btn-success' onclick='accessFun(" + data_val[i].mid + ")'>通过</button><button class='btn btn-danger' onclick='uncheck(" + data_val[i].mid + ")' >拒绝</button></td></tr>").appendTo($("#tb"));

                        }
                    }
                }
            });
        }



    </script>
</head>
<body>


<nav class="navbar navbar-default">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <a class="navbar-brand" href="#">查询</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <form class="navbar-form navbar-left">
                <div class="form-group">
                    <input type="text" class="form-control" placeholder="请输入真实姓名查询" oninput="queryByCondtion(this.value)">
                </div>
            </form>

        </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
</nav>

<table class="table table-striped table-hover">
    <thead>
    <th>#</th>
    <th>商家联系人</th>
    <th>联系方式</th>
    <th>联系邮箱</th>
    <th>联系地址</th>
    <th>类型</th>
    <th>真实名称</th>
    <th>证件号</th>
    <th>证件图</th>
    <th>商家状态</th>
    <th>操作</th>
    </thead>

    <tbody id="tb">


    </tbody>
    <tfoot>
    <tr>
        <td colspan="10">
            <div id="pagination" class="mt-3"></div>
            这里显示分页条（分页信息）
        </td>
    </tr>
    </tfoot>
</table>

</body>
</html>